<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="javax.servlet.http.HttpSession" %>
<%@ page import="cn.edu.lingnan.pojo.ScoreDTO" %>
<%@ page import="cn.edu.lingnan.pojo.User" %>
<!DOCTYPE html>
<html>
<head>
    <title>自主选课</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
        body {
            padding: 20px;
        }
        .container {
            max-width: 1000px;
            margin: auto;
        }
    </style>
    <script>
        function toggleCourseSelection(sid, cid, cname, grade, action) {
            let message = action === 'select'
                ? '您确定要选择该课程吗？离开会话后无法恢复！'
                : '您确定要退选该课程吗？离开会话后无法恢复！';
            if (confirm(message)) {
                $.post('SelectCourseServlet', {
                    sid: sid,
                    cid: cid,
                    grade: grade,
                    action: action
                }, function(response) {
                    if (response === 'success') {
                        let btn = $('#btn-' + cid);
                        if (action === 'select') {
                            btn.text('退选')
                                .removeClass('btn-primary')
                                .addClass('btn-danger')
                                .attr('onclick', 'toggleCourseSelection(' + sid + ',' + cid + ',"' + cname + '",' + grade + ',"deselect")');
                            alert(cname + '课程已选择');
                        } else {
                            btn.text('选课')
                                .removeClass('btn-danger')
                                .addClass('btn-primary')
                                .attr('onclick', 'toggleCourseSelection(' + sid + ',' + cid + ',"' + cname + '",' + grade + ',"select")');
                            alert(cname + '课程已退选');
                        }
                    } else {
                        alert('操作失败，请重试');
                    }
                });
            }
        }
    </script>
</head>
<body>
<div class="container">
    <h1 class="mb-4" style="text-align: center;">自主选课</h1>

    <table class="table table-striped"  style="border-collapse: collapse;">
        <thead class="thead-dark">
        <tr>
            <th>课程编号</th>
            <th>课程名称</th>
            <th>讲师名称</th>
            <th>时间</th>
            <th>学分</th>
            <th>年级</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <%
            List<ScoreDTO> noCoursesBySid = (List<ScoreDTO>) session.getAttribute("noCoursesBySid");
            User user = (User) session.getAttribute("user");
            int sid = user.getId();
            if (noCoursesBySid != null) {
                for (ScoreDTO course : noCoursesBySid) {
                    String gradeDisplay;
                    switch (course.getGrade()) {
                        case 0: gradeDisplay = "不限年级"; break;
                        case 1: gradeDisplay = "大一"; break;
                        case 2: gradeDisplay = "大二"; break;
                        case 3: gradeDisplay = "大三"; break;
                        case 4: gradeDisplay = "大四"; break;
                        default: gradeDisplay = "未知年级"; break;
                    }
        %>
        <tr id="course-<%= course.getCid() %>">
            <td><%= course.getCid() %></td>
            <td><%= course.getCname() %></td>
            <td><%= course.getTname() %></td>
            <td><%= course.getCtime() %></td>
            <td><%= course.getCredit() %></td>
            <td><%= gradeDisplay %></td>
            <td>
                <button id="btn-<%= course.getCid() %>" class="btn btn-primary"
                        onclick="toggleCourseSelection(<%= sid %>, <%= course.getCid() %>, '<%= course.getCname() %>', <%= course.getGrade() %>, 'select')">
                    选课
                </button>
            </td>
        </tr>
        <%
                }
            }
        %>
        </tbody>
    </table>
</div>
</body>
</html>
